<script setup lang="ts">
import {reactive, computed, onActivated} from "vue";
import {getArticleInfo, getMessageList, getVersionList} from "@/utils/request";
import {useRoute, useRouter} from "vue-router";

const route=useRoute()
const router=useRouter()
const vueData = reactive({
  tabCurrent: 'one',
  query: {
    page: 1,
    page_size: 30,
  },
  list: [],
  versionList:[],
  total: 0,
  info: {}
})
const pageLength = computed(() => {
  return Math.ceil(vueData.total / vueData.query.page_size)
})
const getInfo = (id: number) => {
  vueData.tabCurrent = 'three'
  getArticleInfo({id}).then(res=>{
    vueData.info=res.data.info
  })
}
onActivated(()=>{
  if (route.query.id){
    getInfo(parseInt(route.query.id))
  }
})
const getVersion=()=>{
  getVersionList({page:1,page_size:1000}).then(res=>{
    vueData.versionList=res.data.data
  })
}
getVersion()
const init = () => {
  getMessageList(vueData.query).then(res => {
    vueData.list = res.data.data
    vueData.total = res.data.total
  })
}
init()
const pageChange = (page) => {
  vueData.query.page = page
  init()
}
</script>

<template>
  <div>
    <div class="pt-60px">
      <v-parallax width="100%" :height="320" src="@/assets/images/message-bg.png">
        <v-container class="h-full">
          <div class="w-full h-full flex flex-col justify-center text-hex-687293">
            <div class="text-24px mb-10px">新闻报道</div>
            <div class="flex items-center text-16px">
              新闻报道
            </div>
          </div>
        </v-container>
      </v-parallax>
    </div>
    <div class="bg-hex-EEEEEE h-60px">
      <v-container class="h-full !p-0">
        <v-tabs v-model="vueData.tabCurrent" selected-class="bg-primary" variant="flat" height="100%">
          <v-tab value="one" class="!px-30px"><span class="text-17px">行业动态</span></v-tab>
          <v-tab value="two" class="!px-30px"><span class="text-17px">版本动态</span></v-tab>
        </v-tabs>
      </v-container>
    </div>
    <v-container class="!py-100px">
      <div v-if="vueData.tabCurrent==='one'">
        <v-row no-gutters>
          <v-col v-for="(item,index) in vueData.list" :key="index" @click="getInfo(item.id)" cols="12" sm="4"
                 class="mb-33px">
            <div class="w-320px cursor-pointer rounded-14px border-1px border-solid border-hex-EEEEEE overflow-hidden">
              <v-img :height="260" width="100%" cover :src="item.cover"></v-img>
              <div class="px-16px py-27px">
                <div class="text-24px truncate mb-10px">{{ item.title }}</div>
                <div class="text-hex-8A8A8A text-18px mb-20px">{{ item.subtitle }}</div>
                <div class="text-hex-8A8A8A text-18px">{{ item.release_time }}</div>
              </div>
            </div>
          </v-col>
        </v-row>
        <v-pagination :value="vueData.query.page" @update:modelValue="pageChange" :length="pageLength"
                      color="primary"></v-pagination>
      </div>
      <div v-if="vueData.tabCurrent==='two'" class="flex items-start pl-100px">
        <v-timeline side="end" align="start">
          <v-timeline-item v-for="(item,index) in vueData.versionList" size="small" dot-color="primary">
            <div class="flex">
              <div class="mr-5 shrink-0">
                <div>
                  <strong class="text-hex-8A8A8A text-23px">{{ item.version }}</strong>
                </div>
                <div>
                  <strong class="text-hex-8A8A8A text-16px">{{ item.release_time.split(' ')[0] }}</strong>
                </div>
              </div>
              <div>
                <div class="text-hex-EA612F text-18px mb-20px">{{ item.title }}</div>
                <div class="text-caption text-hex-8A8A8A leading-36px">
                  {{item.content}}
                </div>
              </div>
            </div>
          </v-timeline-item>
        </v-timeline>
      </div>
      <div v-if="vueData.tabCurrent==='three'" class="richTextWrap">
        <div class="pb-90px flex flex-col items-center tracking-3px">
          <div class="text-30px mb-30px">{{ vueData.info.title }}</div>
          <div class="text-hex-96999C text-18px">{{ vueData.info.release_time }}</div>
        </div>
        <v-img :height="340" :src="vueData.info.cover"></v-img>
        <div class="py-50px" v-html="vueData.info.content">
        </div>
      </div>
    </v-container>
  </div>
</template>

<style scoped>
.bg1 {
  background: linear-gradient(71deg, #EA612F 0%, #EA612F 18%, rgba(234, 97, 47, 0.6) 43%, rgba(255, 255, 255, 0) 75%);
}
</style>
<style>
.richTextWrap{
  img[align='center']{
    display: block;
    margin: 0 auto;
  }
  img[align='right']{
    display: block;
    margin-left: auto;
  }
  img[align='left']{
    display: block;
    margin-right: auto;
  }
}
</style>
